<template>
	<view class="coupon-list" @click="jump(`/pages/user/couponDetail?id=${couponData.couponId}`)">
		<view style="width: 35%;text-align: center;">
			<text class="coupon-symbol">¥</text>
			<text class="coupon-number">{{$toYuan(couponData.discountAmount)}}</text>
		</view>
		<view class="dec-parent">
			<text class="coupon-dec dec-top"></text>
			<text class="coupon-dec dec-bottom"></text>
		</view>
		<view style="flex-grow: 1;">
			<view class="coupon-title">{{couponData.name}}</view>
			<view class="coupon-tips">满{{$toYuan(couponData.minAmount) }}可用</view>
		</view>
		<view class="yuan-btn coupon-btn " v-if="couponData.status===0" @click.stop="jump(`/pages/category/goodsList?couponId=${couponData.couponId}&name=${couponData.name}`)">
			去使用
		</view>
		<view class="yuan-btn coupon-btn unavaliable-btn" v-else-if="couponData.status===1">
			已使用
		</view>
		<view class="yuan-btn coupon-btn unavaliable-btn" v-else-if="couponData.status===2">
			已过期
		</view>
		<view class="yuan-btn coupon-btn unavaliable-btn" v-else-if="couponData.status===3">
			已作废
		</view>
		<view class="yuan-btn coupon-btn unavaliable-btn" v-else-if="couponData.status===4">
			已占用
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		couponData: { type: Object, default: {} },
	})
	
	// import { ref } from 'vue';
	// const props = defineProps({
	// 	placeholder: { type: String, default: '搜索名称' },
	// })
	// const keyWords = ref('')
	// const emit = defineEmits(["clickSearch"])
	// const clickSearch = () => {
	// 	emit('clickSearch', keyWords.value)
	// }
	const jump = (url) => {
		uni.navigateTo({ url })
	}
</script>

<style lang="scss">
	.coupon-list {

		background: linear-gradient(90deg, #FBE2D0 0%, #FF8D1E 100%);
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		height: 150rpx;
		padding: 0 20rpx;

		.coupon-list:last-child {
			margin-bottom: 0;
		}

		.coupon-symbol {
			font-size: 32rpx;
			color: #E26B3A;
		}

		.coupon-number {
			font-size: 56rpx;
			font-weight: bold;
			color: #E26B3A;
		}

		.coupon-title {
			color: #333;
			font-size: 32rpx;
		}

		.coupon-tips {
			color: #666;
			font-size: 28rpx;
			margin-top: 10rpx;
		}

		.coupon-btn {
			color: #fff;
			background-color: #E95249;
			width: 140rpx;
			height: 60rpx;
			font-size: 28rpx;
			border-radius: 60rpx;
		}
		.unavaliable-btn{
			background-color: #999;
		}

		.dec-parent {
			position: relative;
			border-left: dashed 1px #eee;
			height: 100%;
			width: 1px;
			margin-right: 20rpx;
		}

		.coupon-dec {
			width: 20rpx;
			height: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			position: absolute;
		}

		.dec-top {
			top: -10rpx;
			left: -10rpx
		}

		.dec-bottom {
			bottom: -10rpx;
			left: -10rpx
		}
	}
</style>